<template>
    <div class="search">
      <div class="top">
        <div class="left">
          <div class="back-wrapper">
            <back></back>
          </div>
        </div>
        <div class="center">
          <input type="text" class="ipt" placeholder="搜索影片、影院" autofocus="autofocus" v-model="searchIndexes">
        </div>
        <div class="right" @click="searchIndexes=''">取消</div>
      </div>
      <div class="bottom" ref="bottom">
        <div class="content">
          <div class="no-search" v-show="showNoSearch">
            <div class="bg-wrapper"></div>
            <div class="text-wrapper">暂未找到<span class="search-msg"> {{searchIndexes}} </span>相关的影片或影院</div>
          </div>
          <div class="movie-wrapper" v-show="showMovie">
            <div class="title">电影</div>
            <div class="content">
              <div class="line-block-item" v-for="item in filmSearchInfo.moduleDataList" @click="$router.push({path:'/onlineMovieDetails',query:{id:item.id}})">
                <div class="left">
                  <img :src="item.posterPicUrl" alt="" style="width: 100%;height: 102px;">
                </div>
                <div class="center">
                  <h1 class="name">{{item.name}}</h1>
                  <p class="protagonist">{{item.cast}}</p>
                  <p class="address">{{item.country}}/{{item.producedYear}}</p>
                </div>
                <div class="right">
                  {{item.score}}
                </div>
              </div>
            </div>
          </div>
          <div class="cinema-wrapper" v-show="showCinema">
            <div class="title">影院</div>
            <div class="content">
              <div class="line-block-item" v-for="item in cinemaSearchInfo.moduleDataList" @click="$router.push({path:'/cinemaInfo',query:{id:item.id}})">
                <div class="left">
                  <img :src="item.cinemaPicUrl" alt="" style="width: 100%;height: 102px;">
                </div>
                <div class="right">
                  <h1 class="name">{{item.name}}</h1>
                  <p class="introduction ">{{item.desc}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import back from '../../../components/back/back'
  import BScroll from 'better-scroll'
  import {getStorage} from "../../../common/js/localStorage";
  import global from '../../../common/js/global'
    export default {
        name: "search",
        components:{
          'back':back
        },
        data(){
          return{
            searchIndexes:'',
            cinemaSearchInfo:{},
            filmSearchInfo:{},
            showNoSearch:false,
            showMovie:false,
            showCinema:false
          }
        },
        methods:{
          _getSearchInfo(){
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo').JSESSIONID
                },
                url:global.$host+'/search',
                data:{
                  searchKey:this.searchIndexes
                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  let data = res.data.data
                  this.showNoSearch = false
                  this.showCinema = false
                  this.showMovie = false
                  if(!data.filmSearchInfo&&!data.filmSearchInfo&&this.searchIndexes.length>0){
                    this.showNoSearch = true
                  }else if(this.searchIndexes.length>0){
                    if(data.cinemaSearchInfo.moduleType){
                      this.cinemaSearchInfo = data.cinemaSearchInfo
                      this.showCinema = true
                    }
                    if(data.filmSearchInfo.moduleType){
                      this.filmSearchInfo = data.filmSearchInfo
                      this.showMovie = true
                    }
                    if(this.showCinema ===false&&this.showMovie===false){
                      this.showNoSearch = true
                    }
                  }

                }else {
                  // Toast(res.data.errorMsg)
                }
              }else {
                // Toast('服务器错误，错误代码:'+res.data.status)
              }
            })
          }
        },
        mounted() {
        this.$nextTick(()=>{
          if(!this.scroll){
            // return
            let scroll = new BScroll(this.$refs['bottom'],{click:true})
          }else {
            this.scroll.refresh();
          }
        })
      },
        watch:{
          'searchIndexes'(){
            this._getSearchInfo()
          }
        }
    }
</script>

<style scoped lang="stylus">
  .search
    height 100%
    .top
      height 32px
      padding 10px
      display flex
      .left
        flex 0 0 36px
        overflow hidden
        .back-wrapper
          margin-top 5px
          height 22px
      .center
        flex 1
        height 32px
        overflow hidden
        padding-right 10px
        .ipt
          height 32px
          width calc(100% - 35px)
          padding-left 35px
          background #171718 url("btn-search.svg") no-repeat 10px center/16px 17px
          outline none
          border-radius 4px
          font-size 14px
          color #ffffff
      .right
        flex 0 0 36px
        overflow hidden
        line-height 32px
        text-align center
        font-size 14px
        color #FFFFFF
    .bottom
      height calc(100% - 52px)
      overflow hidden
      .no-search
        width 100%
        padding-top 120px
        text-align center
        height 180px
        /*background #ffffff url("bg-no-search.svg")no-repeat*/
        .bg-wrapper
          margin 0 auto
          border-radius 62px
          height 124px
          width 124px
          background #282828 url("bg-no-search.svg") no-repeat center/64px 64px
        .text-wrapper
          height 20px
          line-height 20px
          padding-top 36px
          color #666666
          font-size 14px
          .search-msg
            color #F7C20F
            font-size 12px
      .movie-wrapper
        .title
          text-align left
          color #8B929E
          padding 9px 10px
          height 17px
          line-height 17px
          font-size 12px
        .content
          .line-block-item
            display flex
            padding 9px 10px
            background #171718
            margin-bottom 10px
            .left,.center,.right
              overflow hidden
            .left
              text-align right
              flex 0 0 74px
              background url("bg_poster.png")no-repeat center /100% 100%
            .center
              flex 1
              text-align left
              padding-left 15px
              padding-right 0px
              .name,.protagonist
                overflow hidden
                text-overflow ellipsis
                white-space nowrap
              .name
                color #ffffff
                height 22px
                line-height 22px
                padding-top 14px
                font-size 16px
              .protagonist,.address
                color #8B929E
                height 16px
                line-height 16px
                font-size 11px
                padding-top 9px
            .right
              flex 0 0 60px
              text-align right
              color #F7C20F
              font-size 16px
              padding-top 29px
      .cinema-wrapper
        .title
          text-align left
          color #8B929E
          padding 9px 10px
          height 17px
          line-height 17px
          font-size 12px
        .content
          .line-block-item
            padding 9px 10px
            display flex
            background #171718
            margin-bottom 10px
            .left
              flex 0 0 74px
              text-align right
              font-size 0
              background url("bg_poster.png")no-repeat center /100% 100%
            .right
              flex 1
              text-align left
              padding-left 15px
              height 102px
              overflow hidden
              .name
                height 22px
                line-height 22px
                font-size 16px
                color #ffffff
                padding-top 6px
              .introduction
                color #8B929E
                font-size 11px
                padding-top 2px
                line-height 16px
                overflow : hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;

</style>
